<template>
    <div class="app-container">
        <!--搜索面板-->
        <div class="filter-container">
            <el-form :model="searchForm" status-icon ref="searchForm" label-width="80px">
                <el-row :gutter="10">
                    <el-col :sm='6'>
                        <el-form-item label="代理商" prop="parentPath">
                            <el-cascader
                                v-model = "searchForm.parentPath"
                                placeholder="请输入代理商"
                                :options="agentList"
                                :key = "searchForm.parentPath"
                                :props="{ checkStrictly: true }"
                                filterable
                                @keyup.enter.native="handleFilter"
                                clearable></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="6">
                        <el-form-item label="区域:" prop="areaPath">
                            <el-cascader
                                v-model = "searchForm.areaPath"
                                placeholder="请输入区域"
                                :options="searchAreaList"
                                :key = "searchForm.areaPath"
                                filterable
                                @keyup.enter.native="handleFilter"
                                clearable></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="12">
                        <el-form-item label-width="20px">
                            <el-button v-waves type="success" icon="el-icon-plus" @click="handleEdit()">新增
                            </el-button>
                            <el-button v-waves type="primary" icon="el-icon-search" @click="handleFilter">
                                搜索
                            </el-button>
                            <el-button v-waves icon="el-icon-refresh" @click="handleReset">
                                重置
                            </el-button>
                            <el-button v-waves type="danger" icon="el-icon-delete" @click="handleRemove()">
                                批量删除
                            </el-button>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </div>
        <PageTable class="containtable" :query-method="page" :query-form="searchForm" ref="pageTable">
            <el-table-column label="代理商" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.agentName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="区域" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.areaName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="代理商路径" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.agentPathName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="区域路径" align="center">
                <template slot-scope="scope">
                    <span>{{ scope.row.areaPathName }}</span>
                </template>
            </el-table-column>
            <el-table-column label="操作" align="center" width="200px">
                <template slot-scope="scope">
                    <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑
                    </el-button>
                    <el-button type="danger" size="mini" icon="el-icon-remove" @click="handleRemove(scope.row.id)">
                        删除
                    </el-button>
                </template>
            </el-table-column>
        </PageTable>
        <!--分页-->

        <!--新增-->
        <el-dialog title="编辑" :visible.sync="editFormShow" :center="true" width="880px" :close-on-click-modal="false">
            <el-form status-icon :rules="rules" :model="editForm" ref="editForm" label-width="120px">
                <el-row>
                    <el-col :sm="12">
                        <el-form-item label="代理商:" prop="parentPath">
                            <el-cascader
                                v-model = "editForm.parentPath"
                                placeholder="请输入代理商"
                                :options="agentList"
                                :props="{ checkStrictly: true }"
                                :key = "editForm.parentPath"
                                @change="getAreaList"
                                clearable></el-cascader>
                        </el-form-item>
                    </el-col>
                    <el-col :sm="12">
                        <el-form-item label="区域:" prop="areaPath">
                            <el-cascader
                                v-model = "editForm.areaPath"
                                placeholder="请输入代理商"
                                :options="areaList"
                                :key = "editForm.areaPath"
                                clearable></el-cascader>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer">
                <el-button type="primary" v-waves @click="onSubmit('editForm')" icon="el-icon-success" v-loading="loading">提交</el-button>
                <el-button v-waves @click="onCancel" icon="el-icon-error">取消</el-button>
            </div>
        </el-dialog>
        <!--新增-->
    </div>
</template>

<script>
    import waves from '@/directive/waves'
    import PageTable from "@/components/Pagination/PageTable";
    import {page, detail, edit, remove} from '@/api/admin/xyps/agentArea'
    import {agentList} from "@/api/admin/xyps/agent";
    import {agentAreaList, areaAllList} from "@/api/admin/system/area";

    export default {
        name: 'xypsXypsAgentArea',
        components: {
            PageTable
        },
        directives: {
            waves
        },
        data() {
            return {
                agentList:[],
                searchAreaList:[],
                areaList : [],
                agentId: "",
                type:"",
                page,
                loading:false,
                searchForm: {
                    phone: '',
                    name: '',
                    parentPath:"",
                    areaPath :"",
                    parentId : "",
                    areaId : "",
                },
                rules: {
                    parentPath:  [
                        {required: true, message: '请输入代理商', trigger: 'blur'}
                    ],
                    areaPath:  [
                        {required: true, message: '请输入区域', trigger: 'blur'}
                    ],
                },
                editFormShow: false,
                editForm: {
                    id: '',
                    agentId: '',
                    areaId: '',
                    parentPath :"",
                    parentId : "",
                    areaPath:"",
                },
            }
        },
        methods: {
            getAgentList(isParentId){
                agentList({isParentId : isParentId, type : 2}).then(res =>{
                    this.agentList = res.data.agentList
                })
            },
            getSearchAreaList(){
                areaAllList().then(res =>{
                    this.searchAreaList = res.data.areaList;
                })
            },
            getAreaList(){
                if (this.editForm.parentPath !== null && this.editForm.parentPath !==''){

                    this.editForm.parentId = this.editForm.parentPath.pop();
                    this.editForm.parentPath.push(this.editForm.parentId);
                } else {
                    this.editForm.parentPath = null;
                    this.editForm.parentId = null;
                }
                if ( this.editForm.id !== null && this.editForm.id !== ''){
                    this.type = 1
                } else {
                    this.type = 0
                }
                agentAreaList({agentId :  this.editForm.parentId, type : this.type, agentAreaId : this.editForm.id}).then(res => {
                    this.areaList = res.data.areaList
                })
            },
            handleFilter() {
                console.log(this.searchForm)
                if (this.searchForm.parentPath !== null && this.searchForm.parentPath !== ''){
                    this.searchForm.agentId = this.searchForm.parentPath.pop()
                    this.searchForm.parentPath.push(this.searchForm.parentId)
                } else {
                    this.searchForm.parentPath = null;
                    this.searchForm.parentId = null;
                }

                if (this.searchForm.areaPath !== null && this.searchForm.areaPath !== ''){
                    this.searchForm.areaId = this.searchForm.areaPath.pop()
                  this.searchForm.areaPath.push(this.searchForm.areaId)
                } else {
                    this.searchForm.areaPath = null;
                    this.searchForm.areaId = null;
                }
                this.$refs.pageTable.reset();
            },
            handleReset() {
                this.$refs.searchForm.resetFields();
                this.$refs.pageTable.reset();
            },
            handleEdit(row) {
                this.loading = false;
                this.editFormShow = true;
                this.editForm.id = '';
                this.editForm.areaPath = "";
                this.editForm.parentPath = "";
                this.editForm.agentId = "";
                this.editForm.areaId = "";
                this.$nextTick(() => {
                    this.$refs.editForm.clearValidate();
                    this.$refs.editForm.resetFields();
                });
                if (!row) {
                    return;
                }

                detail({id: row.id}).then(res => {
                    this.editForm.id = row.id;
                    this.editForm.parentPath = res.data.agentArea.agentPath;
                    console.log(res.data)
                    console.log(this.editForm.parentPath)
                    this.editForm.areaPath = res.data.agentArea.areaPath;
                    Object.entries(res.data.agentArea).forEach(([key, val]) => {
                        if (this.editForm[key] !== undefined) {
                            this.editForm[key] = val;
                        }

                    });
                    this.getAreaList();
                })
            },
            //提交表单
            onSubmit(editForm) {
                if (this.loading) {
                    return
                }
                this.loading = true;
                this.$refs[editForm].validate((valid) => {
                    if (!valid) {
                        this.loading = false;
                        return false;
                    }
                    if (this.editForm.parentPath !== null){
                        this.editForm.agentId = this.editForm.parentPath.pop()
                    }
                    if (this.editForm.areaPath !== null){
                        this.editForm.areaId = this.editForm.areaPath.pop()
                    }
                    edit(this.editForm).then(() => {
                        this.$notify({
                            title: '提示',
                            message: '提交成功',
                            type: 'success'
                        });
                        this.editForm.parentPath = null;
                        this.$refs.pageTable.refresh();
                        this.editFormShow = false;
                    }).finally(() => {
                        this.loading = false;
                    })
                })
            },
            //删除用户
            handleRemove(id) {
                if (!id) {
                    id = this.$refs.pageTable.selects.map(item => item.id).join(',')
                }
                if (!id) {
                    this.$message({
                        type: 'error',
                        message: '请选择要操作的记录!'
                    });
                    return;
                }
                this.$confirm('此操作将永久删除, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    remove({ids: id}).then(() => {
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.$refs.pageTable.refresh();
                    })
                });
            },
            // 取消提交
            onCancel: function () {
                this.editFormShow = false;
            }
        },
        mounted() {
            this.getAgentList();
            this.getSearchAreaList();
            this.$refs.pageTable.refresh();
        }
    }
</script>

<style scoped>

</style>

